<template>
    <div class="wrap">
        <van-form @submit="onSubmit">
            <van-field
                name="village"
                label="小区"
                readonly
                @click="vClick"
                :value="village"
                placeholder="点击选择"
                :rules="[{ required: true, message: '请选择小区' }]"
            />
            <van-field
                name="lou"
                label="楼栋"
                readonly
                @click="louclick"
                :value="build"
                placeholder="点击选择"
                :rules="[{ required: true, message: '请选择楼栋' }]"
            />
            <van-field
                name="house"
                label="房屋"
                readonly
                @click="houseClick"
                :value="house"
                placeholder="点击选择"
                :rules="[{ required: true, message: '请选择房屋' }]"
            />
            <van-field
                name="owner"
                label="与屋主关系"
                readonly
                @click="ownerPicker=true"
                :value="ownerRelations"
                placeholder="点击选择"
                :rules="[{ required: true, message: '请选择与屋主关系' }]"
            />
         
           
           
             <div  style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                进入系统
                </van-button>
            </div>
        </van-form>

       
        
       
      
        
         <van-popup v-model="ownerPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="ownerList"
                @confirm="ownerConfirm"
                @cancel="ownerPicker = false"
            />
        </van-popup>
         <van-popup v-model="housePicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="houseList"
                @confirm="houseConfirm"
                @cancel="housePicker = false"
            />
        </van-popup>
        <van-popup v-model="louPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="louDongList"
                @confirm="louConfirm"
                @cancel="louPicker = false"
            />
        </van-popup>
        <van-popup v-model="villagePicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="villageList"
                @confirm="villageConfirm"
                @cancel="villagePicker = false"
            />
        </van-popup>
     
      

       

        
       
        
    </div>
</template>

<script>
import { Notify,Dialog,Toast } from 'vant';
import axios from 'axios'
import api from '../api/myvillage.js'
    export default {
        // 3- 4- 5-父母 6- 7- 10-儿媳 8- 9- 10-
        data: function () {
            return {
                enter:'',
                ownerList:[{
                    type:0,
                    text:"房主"  
                },{
                    type:1,
                    text:"配偶"  
                },{
                    type:2,
                    text:"子"  
                },{
                    type:3,
                    text:"女"  
                },{
                    type:4,
                    text:"孙子、孙女，或外孙子、外孙女"  
                },{
                    type:5,
                    text:"父母"  
                },{
                    type:6,
                    text:"祖父母或外祖父母"  
                },{
                    type:7,
                    text:"兄、弟、姐、妹"  
                },{
                    type:8,
                    text:"其他亲属"  
                },{
                    type:9,
                    text:"女婿"  
                },{
                    type:99,
                    text:"儿媳"  
                },{
                    type:99,
                    text:"租客"  
                }],
                ownerPicker:false,
                ownerRelation:'',
                houseList:[],
                house:'',
                houseId:'',
                housePicker:false,
                build:'',
                buildingId:'',
                louPicker:false,
                louDongList:[],
                hainfo:'',
                type:'',
                messaget:'',
                village:'',
                uploader:[],
                uploader1:[],
                uploader2:[],
                n_place:'',
                danPicker:false,
                fileList:[],
                fileList1:[],
                fileList2:[],
                communityId:'',
                brandPicker:false,
                bcolorPicker:false,
                ccolorPicker:false,
                ctypePicker:false,
                rightsPicker:false,
                villagePicker:false,
                onlinePicker:false,
                binPicker:false,
                zongPicker:false,
                mianPicker:false,
                villageList:[],               
                hunPicker:false,
                jiaoyuPicker:false,
                showCalendar:false,
                village:'',
                ownerRelations:'',
                form:{
                    zzmm:'',
                    activationCode:'',
                    "openId": "",
                    "name": "",
                    "communityId": "",
                    "pictureId": "",
                    "idCard": "",
                    "phone": "",
                    "sex": "",
                    "age": '',
                    "building": "",
                    "room": ""
                }
            }
        },
        components: {
           
        },
        created(){
            let that=this
          
            this.getVillage()
            
        },
        mounted() {
           
        },
        methods: {
            houseClick(){
                if(this.houseList.length){
                    this.housePicker=true
                }else{
                   Toast("没有房屋信息") 
                }
            },
            louclick(){
                if(this.louDongList.length){
                    this.louPicker=true
                }else{
                    Toast("没有楼栋信息")
                }
            },
            vClick(){
                if(this.villageList.length){
                    this.villagePicker=true
                }else{
                    Toast("没有小区信息")
                }
                
            },
            ownerConfirm(val){
                this.ownerRelations=val.text
                this.ownerRelation=val.type
                this.ownerPicker=false
            },
            houseConfirm(val){
                this.houseId=val.id
                this.house=val.text
                this.housePicker=false
            },
            louConfirm(val){
                this.buildingId=val.id
                this.build=val.text
                this.louPicker=false
                this.getHouse()
            },
            getHouse(){
                let that=this 
                api.getHouseBy({id:that.buildingId}).then(e=>{
                    if(e.code==200){
                            that.houseList=e.data.map(item=>{
                                item.text=item.mph
                                return item
                            })
                            
                    }
                    
                    
                }).catch(err=>{
                    console.log(err)
                }) 
            },
            getLouDong(){
               let that=this 
               api.getLouDong({id:that.communityId}).then(e=>{
                   if(e.code==200){
                        that.louDongList=e.data.map(item=>{
                            item.text=item.ldh
                            return item
                        })
                        
                   }
                   
                  
               }).catch(err=>{
                   console.log(err)
               }) 
            },
            getVillage(){
               let that=this 
               api.getVillage().then(e=>{
                   if(e.code==200){
                        that.villageList=e.data.map(item=>{
                            item.text=item.name
                            return item
                        })
                        
                   }
                   
                  
               }).catch(err=>{
                   console.log(err)
               })
            },
           
          
           

          
           
           
          
            villageConfirm(val){
                this.communityId=val.id
                this.village=val.text
                this.villagePicker=false
                this.getLouDong()
            },
           
          
           add(){
               let that=this
               let obj={
                   openId:openid,
                   communityId:this.communityId,
                   buildingId:this.buildingId,
                   houseId:this.houseId,
                   ownerRelation:this.ownerRelation
               }
                api.addNewguanlian(obj).then(e=>{
                Toast.clear()
                if(e.code===200){
                    that.$router.push('/myinfo')
                }
            }).catch(err=>{
                Toast.clear()
                console.log()
            })
           },
           onSubmit(val){
               let that=this

                that.form.openId=openid
                if(!openid){
                   Toast('没有获取openid，请退出系统重试')
                   return 
               }
                Dialog.confirm({
                    title: '已确认提交？',
                    message: '',
                })
                .then(() => {
                    let that=this
                    Toast.loading({
                        duration:0,
                        message: '系统正在采集信息',
                        forbidClick: true,
                    });
                    that.add()
                })
                .catch((err) => {
                    console.log(err)
                });
               
           }
        }
    }
</script>

<style scoped lang="scss">
@import "../common.scss";
  

</style>
